<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { RouterLink } from 'vue-router' // 引入 RouterLink
import { NFlex, NCard, NGrid, NGridItem, NSpace, NTag, NSpin } from 'naive-ui'
import { blogApi, type BlogsRequest } from '@/api/modules/blog'
import { type BlogTitle, ArticleTypeLabels } from '@/types/blog/blogTitle'
import { IconAuthor, IconComment, IconZhan, IconViews, IconTime } from '../components/icons/Icons.vue'

// defineProps<{
//   msg: string
// }>()

// 定义博客数据状态
const blogs = ref<BlogTitle[]>([])
const loading = ref<boolean>(true)
const loadingMore = ref<boolean>(false)
const noMore = ref<boolean>(false)
const pagination = reactive({
  page: 1,
  pageSize: 10,
  total: 0
})

// 调用接口获取博客数据
const fetchBlogs = async (page: number = 1, isLoadMore: boolean = false) => {
  try {
    if (isLoadMore) {
      loadingMore.value = true
    } else {
      loading.value = true
    }

    const params: BlogsRequest = {
      pageIndex: page,
      pageSize: pagination.pageSize,
      keyword: ''
    }

    const response = await blogApi.GetBlogs(params)
    const newBlogs = response.data.pageDatas

    if (isLoadMore) {
      blogs.value = [...blogs.value, ...newBlogs]
    } else {
      blogs.value = newBlogs
    }

    pagination.total = response.data.total
    pagination.page = page

    // 判断是否还有更多数据
    noMore.value = blogs.value.length >= pagination.total

  } catch (error) {
    console.error('获取博客列表失败:', error)
  } finally {
    loading.value = false
    loadingMore.value = false
  }
}

// 加载更多数据
const loadMore = () => {
  if (loading.value || loadingMore.value || noMore.value) return
  fetchBlogs(pagination.page + 1, true)
}

// 组件挂载时获取数据
onMounted(() => {
  fetchBlogs()
})
</script>

<template>
  <n-infinite-scroll :distance="10" @load="loadMore">
    <n-flex vertical>
      <n-spin :show="loading">
        <n-grid :cols="1" responsive="screen" :x-gap="12" :y-gap="12">
          <n-grid-item v-for="blog in blogs" :key="blog.id">
            <n-card :bordered="false" hoverable :header-class="'blog-card'">
              <template #header>
                <!-- 使用 router-link 包装标题 -->
                <RouterLink :to="{ name: 'blogDetail', params: { id: blog.id } }"
                  style="text-decoration: none; color: inherit;">
                  <h3>
                    <n-tag :type="blog.type === 1 ? 'success' : 'info'">
                      {{ ArticleTypeLabels[blog.type] }}
                    </n-tag>
                    {{ blog.title }}
                  </h3>
                </RouterLink>
              </template>
              <template #header-extra>
                <n-flex align="center">
                  <n-space :size="2" title="查看数">
                    <n-icon size="20" :depth="4" :component="IconViews" />
                    <span>
                      {{ blog.views }}
                    </span>
                  </n-space>
                  <n-space :size="2" title="点赞数">
                    <n-icon size="20" :depth="4" :component="IconZhan" />
                    <span>
                      {{ blog.likes }}
                    </span>
                  </n-space>
                  <n-space :size="2" title="评论数">
                    <n-icon size="20" :depth="4" :component="IconComment" />
                    <span>
                      {{ blog.commentCount }}
                    </span></n-space>
                </n-flex>
              </template>
              <!-- 内容部分也可以添加跳转链接 -->
              <RouterLink :to="{ name: 'blogDetail', params: { id: blog.id } }"
                style="text-decoration: none; color: inherit;">
                <p>{{ blog.summary }}</p>
              </RouterLink>
              <template #footer>
                <n-space justify="space-between">
                  <n-space :size="2" title="作者">
                    <n-icon size="20" :depth="4" :component="IconAuthor" />
                    <span>
                      {{ blog.authorName }}
                    </span>
                  </n-space>
                  <n-space :size="2" title="发布时间">
                    <n-icon size="20" :depth="4" :component="IconTime" />
                    <span>
                      {{ blog.publicationTime }}
                    </span>
                  </n-space>
                </n-space>
              </template>
            </n-card>
          </n-grid-item>
        </n-grid>

        <!-- 空状态 -->
        <n-card v-if="!loading && blogs.length === 0" :bordered="false">
          <n-flex justify="center" align="center" style="padding: 40px;">
            <span>暂无博客数据</span>
          </n-flex>
        </n-card>
        <!-- 加载更多状态 -->
        <n-flex justify="center" v-if="!loading && blogs.length > 0">
          <n-spin v-if="loadingMore" size="small">
            <template #description>
              加载中...
            </template>
          </n-spin>
          <div v-else-if="noMore" style="padding: 20px; text-align: center; color: #999;">
            没有更多数据了
          </div>
        </n-flex>
      </n-spin>
    </n-flex>
  </n-infinite-scroll>
</template>

<style scoped>
/* 使用 :deep() 选择器穿透 scoped 作用域 */
:deep(.blog-card) {
  --n-padding-bottom: 0px;
}

:deep(.n-card__content) {
  --n-padding-bottom: 0px;
}

:deep(.blog-card h3) {
  margin: 0 0 0 0;
}
</style>
